---
layout: layouts/base
title: Home
permalink: /
main: true
---

<div class="form">
	<form class="pure-form" id="color-entry-form" action="#" method="post" name="color-entry-form">
		<div class="form-labels">
			<div class="form-warning" id="warning" role="alert">Please enter at least one valid hex color.</div>
			<label class="textarea-label" for="color-values">Enter hex colors (separated by spaces)</label>
		</div>
		<div class="form-input">
			<textarea id="color-values" name="color-values" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"></textarea>
			<div class="color-picker-wrapper">
				<button id="color-picker-button" class="color-picker-button" type="button" aria-label="Pick a color">
					<span aria-hidden="true">
						{% include "partials/icons/color-picker.njk" %}
					</span>
					<span class="sr-only">Pick a color</span>
				</button>
				<input id="color-picker-input" class="color-picker-input" type="text" data-coloris autocomplete="off" aria-label="Pick a color" tabindex="-1" aria-hidden="true" inert>
			</div>
		</div>
		<input id="make" class="make-button" type="submit" value="Make tints and shades &nbsp;🎉">
	</form>
</div>
<div class="palettes">
	<div id="palette-controls-wrapper" class="palette-controls-wrapper" hidden>
		<div class="palette-controls" id="scroll-top">
			<div class="step-selector" role="group" aria-label="Steps per side">
				<button type="button" class="step-selector-option" data-count="5" aria-pressed="false" tabindex="-1">5</button>
				<button type="button" class="step-selector-option is-active" data-count="10" aria-pressed="true" tabindex="0">10</button>
				<button type="button" class="step-selector-option" data-count="20" aria-pressed="false" tabindex="-1">20</button>
			</div>
			<button id="copy-with-hashtag-toggle" class="action-button action-button-toggle icon-button" type="button" aria-pressed="false">
				{% include "partials/icons/hash.njk" %}
				<span class="sr-only">Show hashtags</span>
			</button>
			<div class="exports">
				<button id="export-image" class="action-button icon-button" type="button" aria-label="Download palette image">
					{% include "partials/icons/photo.njk" %}
				</button>
				<button id="export-open" class="action-button icon-button" type="button" aria-expanded="false" aria-controls="export-dialog" aria-label="Export palettes">
					{% include "partials/icons/download.njk" %}
				</button>
			</div>
		</div>
	</div>
	<div id="tints-and-shades"></div>
	{# Screen reader-only live region for copy confirmations #}
	<div id="copy-status" class="sr-only" aria-live="polite"></div>
</div>

{% include "partials/export-dialog.njk" %}
